import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';
import { Form, Input, Select, Collapse } from 'antd';
import FileReader from '@/components/FileReader';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTable from '@/components/StandardTable';
import DetailsList from '@/components/DetailsList';
import styles from '@/pages/Detail.less';
import { formatFile } from '@/pages/Common/common';
import AdSelect from '@/components/AdSelect';
import { formatCodeVal } from '@/pages/Common/common';
import {  formatPrice } from '@/utils/common';


const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;
const Panel = Collapse.Panel;
const status = [{ code: true, value: '启用' }, { code: false, value: '禁用' }];

@connect(({ manageEtc, loading, common }) => ({
  manageEtc,
  loading: loading.effects['manageEtc/etcChangeList'],
  dictObject: common.dictObject,
}))
@Form.create()
export default class ETCDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      papersDetails: {},
      checkId: '',
      loading: false,
      previewVisible: false,
      previewImage: '',
      fileList: [],
      activeKey: ['1', '2'],
      paperType: {},
      vehicleDriver: [],
      paperTypeHandle: '',
      deleteFileIds: [],
    };
  }
  componentDidMount() {
    const { dispatch, dictObject, checkId } = this.props;
    this.setState({
      checkId: checkId,
    });

    //查询字典
    //币种：
    this.props.dispatch({
      type: 'common/querytDictByCode',
      payload: { code: 'currency-type' },
    });
    // 交易性质：
    dispatch({
      type: 'common/querytDictByCode',
      payload: { code: 'ETC_CHANGE_TYPE' },
    });
  }

  componentWillReceiveProps(nextProps) {
    const {
      manageEtc: { etcDetails, etcChangeList },
      checkId,
      dictObject,
    } = nextProps;

    if (etcDetails[checkId] && etcDetails[checkId].attachments) {
      const fileList = etcDetails[checkId].attachments.map(file => {
        const { id, fileUrl } = file;
        return {
          uid: id,
          name: fileUrl.substring(fileUrl.lastIndexOf('\\') + 1, fileUrl.length),
          status: 'done',
          url: `http://${
            window.location.host
          }/server/api/tms/tms-attachment/readFile?path=${fileUrl}&token=${localStorage.getItem(
            'token'
          )}`,
          id,
        };
      });
      this.setState({ fileList });
    }
    // if (etcDetails[checkId]) {
    //   status.map(v => {
    //     if (v.code === etcDetails[checkId].beActive) {
    //       etcDetails[checkId].beActive = v.value;
    //     }
    //   });
    // }
    // if (dictObject['currency-type'] && etcDetails[checkId] && etcDetails[checkId].currencyType) {
    //   dictObject['currency-type'].map(v => {
    //     if (v.code === etcDetails[checkId].currencyType) {
    //       etcDetails[checkId].currencyType = v.value;
    //     }
    //   });
    // }
    // if (dictObject['ETC_CHANGE_TYPE'] && etcChangeList.list) {
    //   dictObject['ETC_CHANGE_TYPE'].map(v => {
    //     etcChangeList.list.map((v1, i1) => {
    //       if (v.code === v1.tradingType) {
    //         etcChangeList.list[i1].tradingType = v.value;
    //       }
    //     });
    //   });
    // }
  }

  callback = key => {
    // console.log(key);
    this.setState({
      activeKey: key,
    });
  };
  // 分页操作：改参数
  handleStandardTableChange = param => {
    const {
      dispatch,
      manageEtc: { etcDetails },
      checkId,
    } = this.props;
    const params = {
      // ...formValues,
      ...param,
    };
    params.etcNo = etcDetails[checkId].cardNo;
    dispatch({
      type: 'manageEtc/etcChangeList',
      payload: params,
    });
  };
  columns = [
    {
      title: '交易单号',
      dataIndex: 'etcChangeNo',
      fixed: this.props.isMobile ? false : true,
      width: this.props.isMobile ? 'auto' : 150,
    },
    {
      title: '交易类型',
      dataIndex: 'tradingType',
      render: text => (
        <AdSelect onlyRead={true} value={text} data={this.props.dictObject['ETC_CHANGE_TYPE']} />
      ),
    },
    {
      title: '交易金额',
      dataIndex: 'changeMoney',
      render:(text)=>{
        return <span title={text}>{formatPrice(text) }</span>;
      }
    },
    // {
    //   title: '交易人',
    //   dataIndex: '交易人',
    // },
    {
      title: '交易时间',
      dataIndex: 'exportTime',
      width: 200,
    },
    {
      title: '备注',
      dataIndex: 'remarks',
      render: text => {
        return <span title={text}>{text}</span>;
      },
    },
    {
      title: '附件',
      dataIndex: 'attaQuantity',
      render: (text, record) => (
        <FileReader
          type="list"
          count={text}
          urlType="tms"
          params={{ bizId: record.id, fileBizType: 'ETC_CHANGE_MANA' }}
        />
      ),
    },
    {
      title: '创建人',
      dataIndex: 'createBy',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '更新人',
      dataIndex: 'updateBy',
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
    },
  ];

  render() {
    const { previewVisible, previewImage, fileList, papersDetails, vehicleDriver } = this.state;
    const {
      checkId,
      form: { getFieldDecorator },
      manageEtc: { etcDetails, etcChangeList },
      isMobile,
      loading,
      dictObject,
    } = this.props;
    const selectDetails = etcDetails[checkId];

    const customPanelStyle = {
      borderRadius: 4,
      marginBottom: 12,
      border: 0,
      overflow: 'hidden',
    };
    const currencyType = selectDetails
      ? formatCodeVal(dictObject['currency-type'], selectDetails.currencyType)
      : '';
    const beActive = selectDetails ? formatCodeVal(status, selectDetails.beActive) : '';

    const fields = [
      { key: 'cardNo', name: '卡号' },
      { key: beActive, name: '状态', isConst: true },
      { key: 'ownCompanyName', name: '所属公司' },
      { key: 'cartPlateNo', name: '所属车辆' },
      { key: currencyType, name: '币种', isConst: true },
      { key: 'balance', name: '当前金额' },
      { key: 'remarks', name: '备注', isRow: true },
      // { key: 'attachments', name: '票据', isRow: true, isFile: true },
    ];
    // console.log('油卡详情===fileList', fileList);

    return (
      <div className={styles.CollapseDetails}>
        <Collapse
          activeKey={this.state.activeKey}
          onChange={key => this.callback(key)}
          bordered={false}
        >
          <Panel header="ETC信息" key="1" className={styles.customPanelStyle}>
            <DetailsList
              isMobile={isMobile}
              detilsData={{ fields: fields, value: selectDetails, fileList }}
            />
          </Panel>
          <Panel header="交易记录" key="2" className={styles.customPanelStyle}>
            <div>
              {etcChangeList && (
                <StandardTable
                  disabledRowSelected={true}
                  loading={loading}
                  data={etcChangeList}
                  columns={this.columns}
                  scrollX={1200}
                  scrollY={200}
                  onPaginationChange={this.handleStandardTableChange}
                />
              )}
            </div>
          </Panel>
        </Collapse>
      </div>
    );
  }
}
